<template>
  <div class="blog-home">
    <BlogHeader />
    
    <div class="container">
      <main class="main-content">
        <div class="blog-posts">
          <BlogPost 
            v-for="post in blogPosts" 
            :key="post.id" 
            :post="post" 
          />
        </div>
      </main>
      
      <aside class="sidebar">
        <BlogSidebar />
      </aside>
    </div>
    
    <BlogFooter />
  </div>
</template>

<script setup>
import BlogHeader from '../components/BlogHeader.vue'
import BlogPost from '../components/BlogPost.vue'
import BlogSidebar from '../components/BlogSidebar.vue'
import BlogFooter from '../components/BlogFooter.vue'

// 示例博客文章数据
const blogPosts = [
  {
    id: 1,
    title: 'Android 15新特性详解',
    link: '#',
    date: '2025年9月30日',
    author: '博主',
    category: 'Android新版本',
    excerpt: 'Android 15带来了许多令人兴奋的新功能和改进。在这篇文章中，我们将深入探讨这些新特性，包括隐私保护增强、UI改进以及开发者工具的更新。',
    tags: ['Android 15', '新特性', '开发指南']
  },
  {
    id: 2,
    title: '使用Kotlin Flow优化数据流处理',
    link: '#',
    date: '2025年9月25日',
    author: '博主',
    category: 'Kotlin',
    excerpt: 'Kotlin Flow是处理异步数据流的强大工具。本文将介绍如何在Android项目中有效使用Flow来优化数据处理流程，提高应用性能和用户体验。',
    tags: ['Kotlin', 'Flow', '异步处理', '响应式编程']
  },
  {
    id: 3,
    title: '深入理解Jetpack Compose的重组机制',
    link: '#',
    date: '2025年9月20日',
    author: '博主',
    category: 'Jetpack Compose',
    excerpt: 'Jetpack Compose的重组机制是其性能优化的核心。通过深入理解重组的工作原理，我们可以编写更高效的Composable函数，避免不必要的重绘。',
    tags: ['Jetpack Compose', '重组', '性能优化', 'UI']
  }
]
</script>

<style scoped>
.blog-home {
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 20px;
  display: flex;
  gap: 2rem;
}

.main-content {
  flex: 2;
  min-width: 0;
}

.sidebar {
  flex: 1;
  min-width: 0;
}

.blog-posts {
  padding: 1rem 0;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}
</style>